<style scoped>
    .layui-form >>> .layui-form-select{
        z-index: inherit;
    }

    .disabled-select >>> select {
        background-color: #f5f7fa;
        border-color: #e4e7ed;
        color: #c0c4cc;
        cursor: not-allowed;
    }

</style>

<template>
    <div class="company">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>添加库房</legend>
        </fieldset>

        <form class="layui-form " >
            <div class="layui-form-item">
                <label class="layui-form-label">库房编码:</label>
                <div class="layui-input-block">
                    <input type="number" name="code" id="code" @blur="checkCode" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">库房名称:</label>
                <div class="layui-input-block">
                    <input type="text" name="name" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">所属种植户:</label>
                <div class="layui-input-block" >
                    <select class="layui-select" lay-verify="required" id="farmerid"  name="farmerid" lay-search>
                        <option value="">请选择</option>
                        <!--<option   v-for="(emnu, i) in storeroom" :value="emnu.guid">{{emnu.name}}</option>-->
                    </select>

                </div>
            </div>

            <!-- <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">管理人员:</label>
                <div class="layui-input-block">
                    <input type="text" name="HandoverCompany"   placeholder="请选择管理人员" value="" id="HandoverCompany" class="layui-input" style="position:absolute;width:80%;"   onkeyup="search()" autocomplete="off">
                    <select type="text" name="managerid"    id="hc_select" lay-filter="hc_select" autocomplete="off"     class="layui-select" lay-search>
                        <option value="">请输入用户名称</option>
                    </select>
                </div>
            </div> -->


            <div class="layui-form-item">
                <label class="layui-form-label">联系人:</label>
                <div class="layui-input-inline">
                    <input type="text" name="contact" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">

                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">联系电话:</label>
                <div class="layui-input-block">
                    <input type="text" name="contacttel" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>
            <!-- <div class="layui-form-item">
                <label class="layui-form-label">库存容量(吨)</label>
                <div class="layui-input-block">
                    <input type="text" name="capacity" placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div> -->


            <!--<div class="layui-form-item">-->
                <!--<label class="layui-form-label">库房性质: </label>-->
                <!--<div class="layui-input-block">-->
                    <!--<select class="layui-select"  name="nature" >-->
                        <!--<option value="0">请选择</option>-->
                        <!--<option   v-for="(emnu, i) in natureEmnu" :value="emnu.dictkey">{{emnu.dicttext}}</option>-->
                    <!--</select>-->
                <!--</div>-->
            <!--</div>-->

            <!-- <div class="layui-form-item">
                <label class="layui-form-label">标准编号</label>
                <div class="layui-input-block">
                    <select   id="standardCode"  name="standardCode"  lay-filter="standardCode" required    lay-search="">
                        <option value="">请选择</option>
                    </select>

                </div>
            </div> -->

            <div class="layui-form-item">
            <label class="layui-form-label">请选择地区</label>
            <div class="layui-inline" style="width: 155px">
                <select name="province" id="province" lay-verify="required" lay-search lay-filter="province">
                    <option value="">省份</option>
                </select>
            </div>
            <div class="layui-inline" style="width: 155px">
                <select name="city" id="city" lay-verify="required" lay-search lay-filter="city">
                    <option value="">地级市</option>
                </select>
            </div>
            <div class="layui-inline" style="width: 161px">
                <select name="area" id="district" lay-verify="required" lay-search>
                    <option value="">县/区</option>
                </select>
            </div>
    </div>







            <div class="layui-form-item">
                <label class="layui-form-label">详细地址:</label>
                <div class="layui-input-block">
                    <input type="text" name="address" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">备注:</label>
                <div class="layui-input-block">
                    <input type="text" name="remark"    placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>

            <input type="hidden" name="type" id="type" value="2"/>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="submit">立即提交</button>
                    <button class="layui-btn layui-btn-primary" @click="$parent.back">返回</button>
                </div>
            </div>
        </form>
    </div>
</template>

<script>

    export default {
        name: 'AddStoreroomF',

        data () {
            return {
                houses:[],
                natureEmnu:[],
                temp: {
                    address__province: '',
                    address__city: '',
                    address__dist: '',
                },
            }
        },
        mounted() {
            let that = this;
            var form = layui.form;
            // that.loadUser();
            that.loadSelect();
            that.loadNatureEmnu();
            // that.loadOrg();
            // that.loadStandard();
            that.loadFarmer();
            form.render();

            layui.use(['form'], function () {
                var form = layui.form,
                    layer = layui.layer;
                form.render();
                form.on('submit(submit)', function (fdata) {
                    let loader = layer.load();
                    $.ajax({
                        url: '/repository/Storeroom!insertVUEPC.action',
                        data: fdata.field,
                        type: "post",
                        dataType: "json",
                        success: function(res) {
                            console.log('inser storeroom result ', res )

                            if (res.info == "ok") {
                                that.toast("添加成功");
                                that.$parent.switchPage('StoreroomF');
                            } else {
                                that.toast(res.errorMsg);
                            }
                        },
                        complete: function () {
                            layer.close(loader);
                        }
                    });
                    return false;
                });
            });

            layui.use('form', function() {
                var form = layui.form;

                var province = $("#province"),
                    city = $("#city"),
                    district = $("#district");

                //初始将省份数据赋予
                for (var i = 0; i < provinceList.length; i++) {
                    addEle(province, provinceList[i].name);
                }

                //赋予完成 重新渲染select
                form.render('select');

                //向select中 追加内容
                function addEle(ele, value) {
                    var optionStr = "";
                    optionStr = "<option value=" + value + " >" + value + "</option>";
                    ele.append(optionStr);
                }

                //移除select中所有项 赋予初始值
                function removeEle(ele) {
                    ele.find("option").remove();
                    var optionStar = "<option value=" + "" + ">" + "请选择" + "</option>";
                    ele.append(optionStar);
                }

                var provinceText,
                    cityText,
                    cityItem;

                //选定省份后 将该省份的数据读取追加上
                form.on('select(province)', function(data) {
                    provinceText = data.value;
                    $.each(provinceList, function(i, item) {
                        if (provinceText == item.name) {
                            cityItem = i;
                            return cityItem;
                        }
                    });
                    removeEle(city);
                    removeEle(district);
                    $.each(provinceList[cityItem].cityList, function(i, item) {
                        addEle(city, item.name);
                    })
                    //重新渲染select
                    form.render('select');
                })

                ////选定市或直辖县后 将对应的数据读取追加上
                form.on('select(city)', function(data) {
                    cityText = data.value;
                    removeEle(district);
                    $.each(provinceList, function(i, item) {
                        if (provinceText == item.name) {
                            cityItem = i;
                            return cityItem;
                        }
                    });
                    $.each(provinceList[cityItem].cityList, function(i, item) {
                        if (cityText == item.name) {
                            for (var n = 0; n < item.areaList.length; n++) {
                                addEle(district, item.areaList[n]);
                            }
                        }
                    })
                    //重新渲染select
                    form.render('select');
                })



            });

        },
        updated(){
            layui.form.render('select');
            layui.form.render();
        },
        methods: {
            //加载用户权限信息
            loadUser:  function (){
                $.ajax({
                    url: '/repository/Storeroom!getManager.action',
                    type: "post",
                    dataType: "json",
                    success: function(res) {
                        console.log(res)
                        if (res != undefined && res.info != undefined) {
                            var data = res.info;
                            $.each(data, function (index, item) {
                                $('#hc_select').append(new Option(item.realname + "(" + item.telphone + ")", item.guid));// 下拉菜单里添加元素
                            });
                            layui.form.render("select");

                        } else {
                            alert("系统错误");
                        }
                    }
                });
            },
            //加载用户权限信息
            loadStandard:  function (){
                $.ajax({
                    url: '/repository/Storeroom!getStandard.action',
                    type: "post",
                    dataType: "json",
                    success: function(res) {
                        console.log(res)
                        if (res != undefined && res.info != undefined) {
                            var data = res.info;
                            $.each(res.info, function (index, item) {
                                if(item.code  == res.info){
                                    $('#standardCode').append("<option selected  value=" +item.code +  " > " + item.name + "("+item.code + ")"  + "</option>" );
                                }else{
                                    $('#standardCode').append("<option   value="  +item.code +  " >" + item.name + "("+item.code + ")"  + "</option>" );
                                }
                            });
                            layui.form.render("select");

                        } else {
                            alert("系统错误");
                        }
                    }
                });
            },
            loadSelect: function(){
                layui.use(['form', 'layedit','upload'], function () {
                    var form = layui.form
                    form.on('select(hc_select)', function (data) {   //选择移交单位 赋值给input框
                        $("#HandoverCompany").val(data.value);
                        $("#hc_select").next().find("dl").css({ "display": "none" });
                        form.render();

                    });

                    window.search = function () {
                        var value = $("#HandoverCompany").val();
                        $("#hc_select").val(value);
                        form.render();
                        $("#hc_select").next().find("dl").css({ "display": "block" });
                        var dl = $("#hc_select").next().find("dl").children();
                        var j = -1;
                        for (var i = 0; i < dl.length; i++) {
                            if (dl[i].innerHTML.indexOf(value) <= -1) {
                                dl[i].style.display = "none";
                                j++;
                            }
                            if (j == dl.length-1) {
                                $("#hc_select").next().find("dl").css({ "display": "none" });
                            }
                        }

                    }
                });
            },
            loadNatureEmnu:function (){
                var that = this;
                $.ajax({
                    url: '/sales/Sellform!getDictEmnu.action',
                    type: "post",
                    dataType: "json",
                    data:{dicttype:"21"},
                    success: function(res) {
                        that.natureEmnu = res.info;
                    }
                });
            }, checkCode() {
                var codeVal = $('#code').val();
                if(codeVal.length%3 != 0){
                    this.toast("编码长度必须为  “3”的倍数, 请重新填写！");
                    $('#code').val('');
                }

            },
            loadOrg:function (){
                $.ajax({
                    url: '/sales/Organization!listAll.action',
                    type: "post",
                    dataType: "json",
                    success: function(res) {
                        $.each(res.info, function (index, item) {
                            console.log(item);
                            $('#orgguid').append("<option   value=" + item.guid + " > " + item.name + "</option>");// 下拉菜单里添加元素
                        });
                    }
                });
            },
            loadFarmer:function (){
                let postParam = {};
                postParam['entity.userType'] = 2;
                $.ajax({
                    url: '/system/Tuser!getUserAll.action',
                    type: "get",
                    dataType: "json",
                    params:  postParam,
                    success: function(res) {
                        console.log(res);
                        $.each(res.info, function (index, item) {
                            $('#farmerid').append("<option   value=" + item.guid + " > " + item.realname + "</option>");// 下拉菜单里添加元素
                        });
                        layui.form.render();
                    }
                });
            }
        }
    }

</script>
